<template>
  <jke-modal
      :visible.sync="jkeForm.visible"
      :width="1200"
      :title="jkeForm.title"
      :fullscreen.sync="jkeForm.fullscreen"
      :switchFullscreen="jkeForm.switchFullscreen"
    >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['生产管理','不合格品处理待执行']" marginBottom="10px" currentMenu="执行详情"></crumbs>
    <div class="form-body">
      <div class="cards-box">
        <a-card title="处理信息" :bordered="false">
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">工单编号</p>
              <p class="secondary-text">{{ detailInfo.orderCode }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">生产产品</p>
              <p class="secondary-text">{{ detailInfo.goodsName }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">规格</p>
              <p class="secondary-text">{{ detailInfo.spec }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">工序</p>
              <p class="secondary-text">{{ detailInfo.processCode }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">基本单位</p>
              <p class="secondary-text">{{ detailInfo.basicUnitText }}</p>
            </div>
            <div class="detail-item"></div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">操作人</p>
              <p class="secondary-text">{{ detailInfo.operatorIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">提交人</p>
              <p class="secondary-text">{{ detailInfo.applicantIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">提交时间</p>
              <p class="secondary-text">{{ detailInfo.applyTime }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">处理类型</p>
              <p class="secondary-text">{{ detailInfo.handleTypeText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理人</p>
              <p class="secondary-text">{{ detailInfo.handlerIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理时间</p>
              <p class="secondary-text">{{ detailInfo.handleTime }}</p>
            </div>
          </div>
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">不合格工序</p>
              <p class="secondary-text">{{ detailInfo.failedProcessName || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">不合格操作人</p>
              <p class="secondary-text">{{ detailInfo.failedOperatorName || '-' }}</p>
            </div>
            <div class="detail-item"></div>
          </div>
        </a-card>
        <a-card title="执行信息" :bordered="false" style="margin-top:12px">
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">执行人</p>
              <p class="secondary-text">{{ detailInfo.executorIdText }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">执行时间</p>
              <p class="secondary-text">{{ detailInfo.executeTime }}</p>
            </div>
            <div class="detail-item"></div>
          </div>
          <div class="item-wrap" style="margin-bottom: 40px">
            <div class="detail-item">
              <p class="subtitle">批次编号</p>
              <p class="btn-text" @click="batchRecord">{{ detailInfo.batchCode || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理数量</p>
              <p class="secondary-text">{{ detailInfo.num }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">处理单位</p>
              <p class="secondary-text">{{ detailInfo.reportWorkUnitText }}</p>
            </div>
          </div>
          <div class="item-wrap" style="margin-bottom: 40px" v-if="handleType == 'repair'">
            <div class="detail-item">
              <p class="subtitle">工序</p>
              <p class="secondary-text">{{ detailInfo.processCode }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">返修单位</p>
              <p class="secondary-text">{{ detailInfo.repairReportWorkUnitText }}</p>
            </div>
            <div class="detail-item"></div>
          </div>
          <div class="item-wrap" style="margin-bottom: 40px" v-if="handleType == 'repair'">
            <div class="detail-item">
              <p class="subtitle">返修量</p>
              <p class="secondary-text">{{ detailInfo.repairNum }}</p>
            </div>
            <!-- <div class="detail-item"></div> -->
          </div>
          <div class="item-wrap" style="margin-bottom: 40px" v-if="handleType != 'compromise'">
            <div class="detail-item" style="width:100%">
              <p class="subtitle">备注</p>
              <p class="secondary-text">{{ detailInfo.remark || '-' }}</p>
            </div>
          </div>
          <div class="item-wrap" style="margin-top:40px" v-if="handleType != 'compromise'">
            <div style="width:100%">
              <p class="subtitle">附件</p>
              <file-detail :ids="detailInfo.attachment"></file-detail>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    <batch-production ref="BatchProduction"></batch-production>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { API } from '@/api/requestFzs'
import { commafyTofixed } from '@/utils/util'
import BatchProduction from '@/pubComponent/BatchProduction'
export default {
  data() {
    return {
      jkeForm: {
        title: '执行详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      commafyTofixed,
      detailInfo: {},
      handleType: '',
    }
  },
  components: {
    FileDetail,
    crumbs,
    BatchProduction
  },
  methods: {
    // 批次生产记录弹窗列表
    batchRecord() {
      let obj = {
        id: this.detailInfo.batchId,
        orderId: this.detailInfo.orderId,
        batchCode: this.detailInfo.batchCode,
      }
      this.$refs.BatchProduction.showModal(obj,'B')
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    /* 获取详情 */
    initDetail(query) {
      let id = ''
      this.handleType = query.handleType
      let requestApi = API.messNotQualityHandleIinfoDetailQueryInfoById
      if (query.scrapApplyId) {
        id = query.scrapApplyId
        requestApi = API.messScrapInboundApplyQueryInfoByScrapApplyId
      } else {
        id = query.id
      }
      requestApi(id).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result
          this.jkeForm.visible = true
        }
      })
    },
    /* 获取附件 */
    getFileList(v) {
      this.detailInfo.attachment = v
      console.log('上传的附件id：', v)
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
/deep/.ant-form-vertical {
  display: flex;
  justify-content: space-between;
  .ant-form-item {
    width: 30%;
  }
}
.form-body {
  height: calc(100vh - 126px);
  overflow-y: scroll;
}
.form-footer {
  margin: 12px -12px 0 -12px;
}
.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n + 2) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 126px);
  overflow-y: scroll;
}
</style>
